<template>
  <div class="login">
    <el-container class="div-container">
      <el-header class="div-header">
        <div class="header_box">
          <div class="div-header-item">
            <img src="../../../assets/images/usoft.jpg" class="image-rows" />
            <div class="div-header-item-div" style="width: 900px; position: relative">
              <span style="display: inline-block">文嘟嘟 | 创建店铺 </span>
              <span style="font-size: 12px; display: inline-block">
                +86-{{ userInfo.phonenumber }}
                <el-link style="
                    font-size: 12px;
                    position: relative;
                    top: -2px;
                    right: -5px;
                  " type="primary" @click="layout">
                  退出</el-link>
              </span>
            </div>
          </div>
        </div>
      </el-header>
      <div class="main_box">
        <el-form ref="form" :model="form" :rules="rules" label-width="120px" label-position="center">
          <el-form-item label="店铺名称" prop="platformName" style="margin-top: 30px; margin-left: 114px">
            <el-input v-model="form.platformName" placeholder="请输入店铺名称" clearable class="input-rule"
              style="width: 350px" />
          </el-form-item>
          <el-form-item label="主营品类" prop="mainCategory" style="margin-top: 30px; margin-left: 114px">
            <el-select v-model="form.mainCategory" placeholder="主营品类" clearable size="small" filterable
              style="width: 350px">
              <el-option v-for="dict in templateCode" :key="dict.dictLabel" :label="dict.dictLabel"
                :value="dict.dictLabel" />
            </el-select>
          </el-form-item>
          <el-form-item label="店铺地址" prop="region" style="margin-top: 30px; margin-left: 114px">
            <el-cascader ref="cascaderAddr" v-model="form.region" :options="options" clearable filterable
              class="input-rule" style="width: 350px"></el-cascader>
          </el-form-item>
          <el-form-item label="详细地址" prop="platformAddress" style="margin-top: 30px; margin-left: 114px">
            <el-input v-model="form.platformAddress" placeholder="请输入详细地址" clearable class="input-rule"
              style="width: 350px" />
            <el-button v-if="0 > 1" type="primary" icon="el-icon-search" size="mini"
              style="margin-left: 10px; height: 36px">搜索</el-button>
          </el-form-item>
          <el-form-item label="店铺logo" prop="platformLogUrl" style="margin-top: 30px; margin-left: 114px">
            <imageArray style="width: 500px" :imageStr.sync="form.platformLogUrl" :key="form.platformLogUrl"
              :msg="'图片要求：宽高相等且大于400px，大小2M内。'" :limit="1"></imageArray>
          </el-form-item>
          <el-form-item label="店铺描述" prop="platformRemark" style="margin-top: 30px; margin-left: 114px">
            <el-input :rows="5" type="textarea" placeholder="请输入店铺描述" v-model="form.platformRemark"
              style="width: 350px">
            </el-input>
          </el-form-item>
          <el-checkbox style="margin-left: 29.8%" :checked="multiple" @change="qf(multiple)" maxlength="150"
            show-word-limit>阅读并同意用户协议、隐私政策
          </el-checkbox>

          <div class="save_btn">
            <el-button :loading="loading" size="medium" type="primary" @click.native.prevent="addPlatInfo"
              :disabled="!multiple">
              <span v-if="!loading">保存</span>
              <span v-else>创 建 中...</span>
            </el-button>
            <el-button size="medium" style="margin-left: 30px" @click.native.prevent="dumpUrl('platform')">
              返回
            </el-button>
          </div>
        </el-form>
      </div>
      <div class="el-login-footer" align="center">
        <Footer />
      </div>
    </el-container>
  </div>
</template>

<script>
  import {
    getInfo
  } from "@/api/login";
  import {
    getRegion
  } from "@/api/common/regin";
  import imageArray from "@/components/ImageUpload/imageArray";
  import {
    addInfo
  } from "@/api/platform/info";
  import {
    refreshTokenTwo
  } from "@/api/login";
  import {
    editUser
  } from "@/api/system/user";
  export default {
    name: "add",
    components: {
      imageArray,
    },
    data() {
      return {
        userInfo: {},
        templateCode: [],
        platformName: null,
        activeName: "all",
        form: {},
        // 表单校验
        rules: {
          platformName: [{
            required: true,
            message: "店铺名称不能为空",
            trigger: "blur",
          }, ],
          mainCategory: [{
            required: true,
            message: "主营品类不能为空",
            trigger: "blur",
          }, ],
        },
        // 地区信息
        options: [],
        multiple: false,
        loading: false,
      };
    },
    watch: {},
    created() {
      let arr = this.$store.state.user.roles;
      let index = 0;
      arr.forEach((element) => {
        if ("store" === element || "ROLE_DEFAULT" === element) {
          index++;
        }
      });
      if (0 >= index) {
        this.$router.push("/index");
      }
      getInfo().then((respone) => {
        this.userInfo = respone.user;
      });
      this.getDicts("platform_trade_code").then((response) => {
        this.templateCode = response.data;
      });
      // 产地
      getRegion().then((response) => {
        this.options = response.data;
      });
    },
    methods: {
      qf(multiple) {
        this.multiple = !multiple;
      },
      layout() {
        this.$store.dispatch("LogOut").then(() => {
          let url = window.location.href;
          let arrS = url.split("platform");
          location.href = arrS[0] + "login";
        });
      },
      dumpUrl(ul) {
        let url = window.location.href;
        let arrS = url.split("platform");
        location.href = arrS[0] + ul;
      },

      addPlatInfo() {
        this.$refs.form.validate((valid) => {
          if (valid) {
            this.loading = true;
            this.shows = true;
            if (this.options) {
              if (this.$refs["cascaderAddr"] != null) {
                let areaName = this.$refs["cascaderAddr"].getCheckedNodes()[0].pathLabels;
                if (this.form.region) {
                  this.form.platformProvince = areaName[0];
                  this.form.platformCity = areaName[1];
                  this.form.platformArea = areaName[2];
                }
              }
            }
            addInfo(this.form).then((res) => {
                if (res.data == "0") {
                  this.$message.error("添加失败！");
                } else {
                  editUser(res.data).then((respone) => {
                    this.$alert('恭喜您,创建成功!', '创建成功', {
                      confirmButtonText: '确定',
                      callback: action => {
                        this.dumpUrl("platform")
                      }
                    });
                  });
                }
              })
              .catch(() => {
                this.loading = false;
                this.shows = false;
              });
          }
        });
      },
    },
  };
</script>
<style scoped lang="scss">
  .login {
    background-color: #F6F7FB;
    width: 100%;
    min-height: 100%;
  }

  .div-container {
    height: 100%;
    width: 100%;
  }

  .div-header {
    width: 100%;
    height: 60px;
    background-color: #FFF;
    box-shadow: 0px 0px 35px 0px rgba(27, 46, 107, 0.06);

    .header_box {
      width: 1000px;
      height: 100%;
      margin: 0 auto;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
  }

  .div-header-item {
    font-size: 16px;
    display: flex;
    align-items: center;
  }

  .header {
    padding: 21px 0 10px 0;
    padding-bottom: 10px;
  }

  .el-login-footer {
    margin: 40px 0 30px;
    width: 100%;
    font-family: Arial;
    letter-spacing: 1px;
  }

  .main_box {
    border: 1px solid #eee;
    padding: 0px;
    width: 1000px;
    position: relative;
    border-radius: 4px;
    margin: 32px auto 0;
    background-color: #FFF;
    padding: 30px 34px 0;
    box-shadow: 0px 0px 15px 0px rgba(27, 46, 107, 0.03);
    border-radius: 10px;
  }

  .save_btn {
    display: flex;
    justify-content: center;
    margin: 30px 0;
  }

  .el-footer {
    left: 50%;
    bottom: 60px;
    font-family: Arial;
    font-size: 12px;
  }

  // .div-header {
  //   margin-top: 20px;
  //   margin-bottom: 7px;
  // }

  // .div-header-item {
  //   font-size: 16px;
  //   vertical-align: top;
  // }

  .div-header-item-div {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
</style>
